<template>
	<div v-if="!visualizationStore.isLoading" ref="loadingRef" class="overflow-hidden w-screen h-screen"></div>

	<div
		v-if="visualizationStore.isLoading"
		class="w-screen h-screen p-5 flex bg-[url('@/assets/imgs/bg.jpg')] bg-no-repeat bg-cover bg-center text-white overflow-hidden"
	>
		<!-- 左侧 -->
		<div class="LeftAndRightCol_Container">
			<LeftCol />
		</div>
		<!-- 中间 -->
		<div class="flex w-1/2 mx-3">
			<CenterCol />
		</div>
		<!-- 右侧 -->
		<div class="LeftAndRightCol_Container">
			<RightCol />
		</div>
	</div>
</template>

<script setup name="App">
	import LeftCol from '@/components/DistrictManagement/LeftCol.vue';
	import CenterCol from '@/components/DistrictManagement/CenterCol.vue';
	import RightCol from '@/components/DistrictManagement/RightCol.vue';

	import { onUnmounted, onMounted, ref, watch } from 'vue';

	// 数据仓库
	import { useVisualizationStore } from '@/stores/visualizationStore';
	const visualizationStore = useVisualizationStore();
	// 开启定时器, 轮询数据
	visualizationStore.startRequestData();

	import * as echarts from 'echarts';
	// Echarts容器节点, 设置为了全屏:如果数据未加载前, 则让该dom执行loading动画
	const loadingRef = ref(null);

	onMounted(() => {
		const mycharts = echarts.init(loadingRef.value);

		// 监听数据是否完成
		watch(
			() => visualizationStore.isLoading,
			(isLoading) => {
				isLoading ? mycharts.hideLoading() : mycharts.showLoading();
			},
			{ immediate: true }
		);
	});

	onUnmounted(() => {
		visualizationStore.stopRequestData();
	});
</script>

<style scoped>
	/* 左侧和右侧公用样式 */
	.LeftAndRightCol_Container {
		@apply flex flex-1 p-3 bg-opacity-50 bg-slate-500;
	}
</style>
